<template>
  <div class="cut-box">
    <div class="upload-container">
      <div class="upload-item-box">
        <!-- option是配置，格式是对象，getbase64Data是组件的一个方法获取裁剪完的头像 2.14新增一个获取getblobData的方法 -->
        <h5-cropper
          :option="option"
          @getbase64Data="getbase64Data"
          @getFile="getFile"
        ></h5-cropper>
      </div>
    </div>
  </div>
</template>

<script>
import { apiUpload } from "../../request/api";
import H5Cropper from "vue-cropper-h5";
export default {
  props: {
    size_w: Number,
    size_h: Number,
    name: String,
  },
  watch: {
    size_w: function () {
      console.log(this.size_w);
    },
  },
  data() {
    return {
      fileList: [], // 已上传图片列表
      option: {
        fixedNumber: [this.size_w, this.size_h],
      }, //配置
      img: "",
    };
  },
  methods: {
    uploadFile(file) {
      // 新建formData对象
      const formData = new FormData();
      // 添加要上传的文件
      formData.append("file", file);
      apiUpload(formData).then((res) => {
        if (res.code == 200) {
          console.log(res);
          let url = res.url;
          this.$emit("UpUrl", {
            name: this.name,
            url: url,
          });
        }
      });
      console.log(file);
    },
    getbase64Data(data) {
      this.img = data;
    },
    getFile(data) {
      console.log(data);
      this.uploadFile(data);
    },
  },
  components: { H5Cropper },
};
</script>

<style lang="scss" scope>
.cut-box {
  width: 100%;
  height: 100%;
  position: absolute;
  img {
    width: 100%;
    height: 100%;
  }
}
.upload-container {
  height: 100%;
}
.upload-item-box {
  height: 100%;
}
.wrapper {
  height: 80vh !important;
}
</style> -->





